<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<link rel="stylesheet" type="text/css" th:href="@{/plugins/bootstrap/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/plugins/jQuery/jquery-ui-1.10.4.css}" />
<link rel="stylesheet" type="text/css" media="all" th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}" />
<link rel="stylesheet" th:href="@{/mobile/common.css}" />
	
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=ESUICaohNGpKKOAx3d2SOzDxuZ2WUMlX&amp;services=&amp;t=20180323171755"></script>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script th:src="@{/plugins/jQuery/navbar/jquery-mobile-navbar.js}"></script>
<script th:src="@{/plugins/bootstrap/bootstrap.min.js}"></script>
<link rel="stylesheet" th:href="@{/mobile/reset.css}" />

<style>

</style>
</head>
<body>
	<div data-role="page" id="pageone">
		<div data-role="header" data-position="fixed">
			<h1>个人中心</h1>
		</div>
		<div data-role="main">
			<input type="hidden" id="userId" th:value="${account.user.id}"/>
			<input type="hidden" id="userPicUrl" th:value="${userPic}"/>
			<input type="hidden" id="personalType" th:value="${personalType}"/>
			<div class="personal-head-bg">
				<div class="row personal-head-main">
					<div class="col-xs-8 ">
						<div class="userPic">
							<img id="userPic" src="" class="img-responsive img-circle"/>
						</div>
						<div class="userInfo">
							<div class="userName">
								<font id="name" th:text="${account.user.name}"></font>
							</div>
							<div class="userRole">
								<font id="role" th:text="${account.role.name}"></font>
							</div>
						</div>
					</div>
					<div class="col-xs-4 ">
						<div class="setting">
						<div class="settingfont">
						<a href="#" data-transition="slide" class="settingsClick"><font>设置</font>&nbsp;&nbsp;<span class="glyphicon glyphicon-menu-right menu-right"></span></a>
						</div>
						</div>
					</div>
				</div>
			</div>
			<div class="personal-title-num" >
				<div class="row-fluid" id="visitor">
					<div class="col-xs-3">
						<div class="number visitorNumDiv">
							<font id="visitorOneNum" class="number-font visitorNum" ></font>
						</div>
						<div class="title">
							<font id="visitorOneTitle" class="title-font" ></font>
						</div>
					</div>
					<div class="col-xs-3">
						<div class="number visitorNumDiv">
							<font id="visitorTwoNum" class="number-font visitorNum" ></font>
						</div>
						<div class="title">
							<font id="visitorTwoTitle" class="title-font" ></font>
						</div>
					</div>
					<div class="col-xs-3">
						<div class="number visitorNumDiv">
							<font id="visitorThreeNum" class="number-font visitorNum" ></font>
						</div>
						<div class="title">
							<font id="visitorThreeTitle" class="title-font" ></font>
						</div>
					</div>
					<div class="col-xs-3">
						<div class="number visitorNumDiv">
							<font id="visitorFourNum" class="number-font visitorNum" ></font>
						</div>
						<div class="title">
							<font id="visitorFourTitle" class="title-font" ></font>
						</div>
					</div>
				</div>
				
				<div class="row-fluid" id="manage">
					<div class="col-xs-4">
						<div class="number manageNumDiv">
							<font id="manageOneNum" class="number-font manageNum"></font>
						</div>
						<div class="title">
							<font id="manageOneTitle" class="title-font " ></font>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="number manageNumDiv">
							<font id="manageTwoNum" class="number-font manageNum" ></font>
						</div>
						<div class="title">
							<font id="manageTwoTitle" class="title-font " ></font>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="number manageNumDiv">
							<font id="manageThreeNum" class="number-font manageNum" ></font>
						</div>
						<div class="title">
							<font id="manageThreeTitle" class="title-font " ></font>
						</div>
					</div>
				</div>
				
				<div class="row-fluid" id="leader">
					<div class="col-xs-3">
						<div class="number">
							<font id="oneNum" class="number-font" ></font>
						</div>
						<div class="title">
							<font id="oneTitle" class="title-font " ></font>
						</div>
					</div>
					<div class="col-xs-3">
						<div class="number">
							<font id="twoNum" class="number-font" ></font>
						</div>
						<div class="title">
							<font id="twoTitle" class="title-font " ></font>
						</div>
					</div>
					<div class="col-xs-3">
						<div class="number">
							<font id="threeNum" class="number-font" ></font>
						</div>
						<div class="title">
							<font id="threeTitle" class="title-font " ></font>
						</div>
					</div>
					<div class="col-xs-3">
						<div class="number">
							<font id="fourNum" class="number-font" ></font>
						</div>
						<div class="title">
							<font id="fourTitle" class="title-font " ></font>
						</div>
					</div>
				</div>
			</div>
			<div class="personal-content" >
				<div class="content-title">
					<font id="contentTitle" class="contentTitle-font " ></font>
				</div>
				<div class="content-number">
					<a href="#" data-transition="slide" class="contentClick">
					<font id="contentNum" class="contentNumber-font" ></font>
					</a>
				</div>
			</div>
			
		</div>
		<div class="BgDiv"></div>
		<div data-role="footer" data-position="fixed" data-tap-toggle="false" id="footerMenu">
			<div id="menu-bar" class="menu-bar">
			</div>
			<div class="flyout-wrap">
    				<a class="flyout-btn" href="#" title="Toggle"><span><img src="/wcsi/img/plus.svg"/></span></a>
				<ul class="flyout"></ul>
  			</div>
		</div>
	</div>
	
	<!-- 上报事件的面板 -->
	<div data-role="page" id="reportDetail"
		style='background-color: #F5F5F5; background-size: cover'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<h1 id="archiving">上报事件详情</h1>
			<a href="#pageone" data-transition="slide" data-direction="reverse"
				class="ui-btn ui-btn-a ui-icon-back ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-left">返回面板</a>
		</div>
		<div data-role="content">
			<table data-role="table" width="100%" data-mode="columntoggle:none"
					data-column-btn-theme="e" data-column-popup-theme="c" id="myTable">
					<tbody>
						<tr>
							<td colspan="2"><label style="color: #999999; margin-top: 30px;">事件状态</label></td>
						</tr>
						<tr>
							<td colspan="2"><div id="reportEventVariable"></div>
							<label style="color: #999999; margin-top: 30px;">事件类型</label></td>
						</tr>
						<tr>
							<td colspan="2"><div id="reportEventType"></div>
							<label style="color: #999999; margin-top: 30px;">事件详细内容</label></td>
						</tr>
						<tr>
							<td colspan="2"><div id="reportContent"></div>
							<label style="color: #999999; margin-top: 30px;">事件备注</label></td>
						</tr>
						<tr>
							<td colspan="2">
							<div id="reportMemo"></div>
							<label style="color: #999999; margin-top: 30px;">图片</label></td>
						</tr>
						<tr>
							<td colspan="2">
								<img src="" id="avatart" style="width: 30%" />
							</td>
						</tr>
						<tr>
							<td style="color: #999999; border-bottom: none !important;"><img src="/wcsi/img/yourlocation.png" width="30px;"
								id="locationimg"></img></td>
							<td id="locationDes" style="color: #999999; border-bottom: none !important;"></td>
						</tr>
					</tbody>
				</table>
		</div>
		<div data-role="popup" id="pop">
			<a href="#" id="backloadingimg" data-rel="back"
				class="ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-right">关闭</a>
			<img src="" id="avatarbig" style="width: 100%" />
		</div>
	</div>
	
	<!-- 内部事件详情 -->
	<div data-role="page" id="registerDetail"
		style='background-color: #F5F5F5; background-size: cover'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<h1>任务详情</h1>
			<a href="#pageone" data-transition="slide" data-direction="reverse"
				class="ui-btn ui-btn-a ui-icon-back ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-left">返回面板</a>
		</div>
		<div data-role="content">
			<table data-role="table" width="100%" data-mode="columntoggle:none"
					data-column-btn-theme="e" data-column-popup-theme="c">
				<tbody>
					<tr>
						<td><label style="color: #999999; margin-top: 30px;">事件类型:</label></td>
					</tr>
					<tr>
						<td colspan="2"><div id="registerEventType"></div></td>
						<label style="color: #999999; margin-top: 30px;">发生时间:</label>
					</tr>
					<tr>
						<td colspan="2"><div id="registerEventAccTime"></div>
						<label style="color: #999999; margin-top: 30px;">详细内容:</label>
						</td>
					</tr>
					<tr>
						<td colspan="2"><div id="registerEventContent"></div>
						<label style="color: #999999; margin-top: 30px;">特别备注:</label>
						</td>

					</tr>
					<tr>
						<td colspan="2"><div id="registerEventMemo"></div>
						<label style="color: #999999; margin-top: 30px;">现场图片</label></td>
					</tr>
					<tr>
						<td colspan="2">
							<img src="" id="registerAvatart" style="width: 30%" />
						</td>
					</tr>
					<tr>
						<td style="color: #999999; border-bottom: none !important;"><img src="/wcsi/img/yourlocation.png" width="30px;"
							id="locationimgRegister"></img></td>
						<td id="locationDesRegister" style="color: #999999; border-bottom: none !important;"></td>
					</tr>

				</tbody>
			</table>


		</div>
		<div data-role="popup" id="pop">
			<a href="#" id="backloadingimg" data-rel="back"
				class="ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-right">关闭</a>
			<!-- data-rel="back" -->
			<img src="" id="avatarbig" style="width: 100%" />
		</div>
	</div>
	
	<!-- 个人积分详情 -->
	<div data-role="page" id="rewardDetail"
		style='background-color: #F5F5F5; background-size: cover'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<span><a href="#pageone" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>个人积分</h1>
		</div>
		<div data-role="content">
			<div class="detail-content" >
				<div class="detail-number">
					<font id="rewardNumber" class="detailNumber-font" ></font>
				</div>
			</div>
			 <table data-role="table"  width="100%" data-mode="columntoggle:none" data-column-btn-theme="e" data-column-popup-theme="c" class="tables">
      			<thead>
        				<tr><th width="25%">事件类型</th><th width="30%" >发生时间</th><th width="30%">发生地点</th><th width="15%">积分</th></tr>
				</thead>
				<tbody id="rewardTbody">
				</tbody>
			</table>
		</div>
		<div data-role="popup" id="pop">
			<a href="#" id="backloadingimg" data-rel="back"
				class="ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-right">关闭</a>
			<img src="" id="avatarbig" style="width: 100%" />
		</div>
	</div>
	
	<!-- 个人评分详情 -->
	<div data-role="page" id="scoreDetail"
		style='background-color: #F5F5F5; background-size: cover'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<span><a href="#pageone" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>个人评分</h1>
		</div>
		<div data-role="content">
			<div class="detail-content" >
				<div class="detail-number">
					<font id="scoreNumber" class="detailNumber-font" ></font>
				</div>
			</div>
			 <table data-role="table"  width="100%" data-mode="columntoggle:none" data-column-btn-theme="e" data-column-popup-theme="c" class="tables">
      			<thead>
        				<tr><th width="25%">事件类型</th><th width="30%" >发生时间</th><th width="30%">发生地点</th><th width="15%">扣分</th></tr>
				</thead>
				<tbody id="scoreTbody">
				</tbody>
			</table>
			<table data-role="table"  width="100%" data-mode="columntoggle:none" data-column-btn-theme="e" data-column-popup-theme="c" class="tables">
      			<thead>
        				<tr><th width="25%">事件类型</th><th width="30%" >发生时间</th><th width="30%">超时类型</th><th width="15%">扣分</th></tr>
				</thead>
				<tbody id="scoreProcessTbody">
				</tbody>
			</table>
		</div>
	</div>

	<div data-role="page" id="settingsPage"
		style='background-color: #F5F5F5; background-size: cover;'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<span><a href="#pageone" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>个人设置</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview">
				<li>
					<div class="row">
						<div class="col-xs-6 settingsUserPicTitle"><span>头像</span></div>
						<div class="col-xs-6 ">
							<a href="#userPicPage" data-transition="slide"><div><img id="UserPic" src="" class="img-responsive img-circle settingsUserPic"/></div></a>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>姓名</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" th:text="${account.user.name}"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>电话</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" th:text="${account.user.contactType}"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>邮箱</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" th:text="${account.user.email}"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row" id="aboutApp">
						<div class="col-xs-6 settingsTitle"><span>关于软件</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue"></div>
						</div>
					</div>
				</li>
			</ul>
        				
		</div>
	</div>
	
	<div data-role="page" id="aboutPage"
		style='background-color: #F5F5F5; background-size: cover;'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<span><a href="#settingsPage" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>关于软件</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview">
				<li>
					<div class="row">
						<div class="col-xs-6 settingsTitle"><span>版本</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue" id="version"></div>
						</div>
					</div>
				</li>
<!-- 				<li>
					<div class="row" id="updataApp">
						<div class="col-xs-6 settingsTitle"><span>更新</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue"></div>
						</div>
					</div>
				</li> -->
				<li>
					<div class="row" id="application">
						<div class="col-xs-6 settingsTitle"><span>应用情况</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="row" id="social">
						<div class="col-xs-6 settingsTitle"><span>社会效益</span></div>
						<div class="col-xs-6 ">
							<div class="settingsValue"></div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	
	<div data-role="page" id="applicationPage"
		style='background-color: #F5F5F5; background-size: cover;'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<span><a href="#aboutPage" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>应用情况</h1>
		</div>
		<div data-role="main" style="background-color: #F5F5F5;">
 			<div class="aboutInfo">
 				<p>贵阳市白云区“数治城管”建设项目，采用中冶赛迪重庆信息技术有限公司研发的数治城管系统作为平台。
 				该系统已经于2018年5月起在白云区正式投入使用。实践证明，该系统运行良好、稳定可靠，并持续更新迭代，获得用户认可。</p>
				<p>数治城管系统支持移动端和浏览器端，提供物联网智能感知及事件上报、移动端事件上报、智能视频分析事件上报、事件受理、视频监控、任务自流程分拨、
				事件处理、事件归档、考核评分、大数据分析、系统配置、3D可视化展示、多维度数据分析等功能模块，满足城管局业务应用需求。</p>
 			</div>
		</div>
	</div>

	<div data-role="page" id="socialPage"
		style='background-color: #F5F5F5; background-size: cover;'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<span><a href="#aboutPage" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>社会效益</h1>
		</div>
		<div data-role="main" style="background-color: #F5F5F5;">
 			<div class="aboutInfo">
 				<p>通过该系统的应用，实现了城市万物互联，构建了数字世界同物理世界相融合的未来城市建设运营生态体系，形成了未来城市高质量发展运营的新模式。 </p>
				<p>该系统结合物联网的应用、塔型考核机制和去中心化的智能流程分拨体系，让城市问题自动化的管理、智慧化的服务、智能化的决策，推进了白云区城市高质量发展。
				同时，通过该系统的建设为白云区城市问题上报提供了渠道，让市民群众参与到城市管理中来，使问题发现更及时；对城管局人力、物力等资源的智能调度，使问题反应、处置和解决更加快速。
				从而实现城管部门与市民群众的良性互动，提升白云区居民的获得感、幸福感和参与感。</p>
 			</div>
		</div>
	</div>
	
	
	
	<div data-role="page" id="userPicPage"
		style='background-color: #F5F5F5; background-size: cover; '>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<span><a id="goSettings" href="#settingsPage" data-transition="slide" data-direction="reverse" class="pageBack" ><span class="fa fa-angle-left headleft"></span> </a></span>
			<h1>个人头像</h1>
		</div>
		<div data-role="content" style="margin: 0; padding: 0;">
			<div style="display: none;"><input type="file" id="file_upload" name="picfile" style="display: none;"/></div>
			<div class="userPicCent">
				<img id="settingsUserPic" src="" class="img-responsive img-circle"/>
			</div>
			<div style="display: none;">
				<input th:value="${session.account.password}" type="text" id="oldPassword"/>
			</div>
			<ul data-role="listview" data-inset="false" style="margin-top: 10px; margin-bottom: 0px;">
				<li data-role="list-divider" style="color: #999999;background: #F2F2F2 !important;"><span style="margin-left: 20px;">原密码</span></li>
			</ul>
			<div>
				<input type="text" id="originPassword" class="personalInput" placeholder="请输入原密码"/>
			</div>
			<ul data-role="listview" data-inset="false" style="margin-top: 0px; margin-bottom: 0px;">
				<li data-role="list-divider" style="color: #999999;background: #F2F2F2 !important;"><span style="margin-left: 20px;">新密码</span></li>
			</ul>
			<div>
				<input type="password" id="alterPassword" class="personalInput" placeholder="请输入新密码"/>
			</div>
			<ul data-role="listview" data-inset="false" style="margin-top: 0px; margin-bottom: 0px;">
				<li data-role="list-divider" style="color: #999999;background: #F2F2F2 !important;"><span style="margin-left: 20px;">确认新密码</span></li>
			</ul>
			<div>
				<input type="password" id="confirmPassword" class="personalInput" placeholder="请再次输入新密码"/>
			</div>
		</div>
		<div data-role="footer" data-position="fixed" data-theme="a" style="background:#FFFFFF;">
		<div>
			<input id="saveBtn" type="submit" data-inline="false" style="background-color: #F44C31; color: white; width: 100%; padding-top: 5px; padding-bottom: 5px; border-radius: 5px"
					value="保&nbsp;&nbsp;存"></input>
		</div>
		</div>
	</div>
	
	<link rel="stylesheet" th:href="@{/mobile/personal/personalIndex.css}" />
	<script th:src="@{/plugins/jQuery/jquery.raty.js}"></script>
	<script th:src="@{/plugins/jQuery/jquery.rotate.min.js}"></script>
	<script th:src="@{/mobile/common.js}"></script>
	<script th:src="@{/mobile/personal/personalIndex.js}"></script>
	<script th:src="@{/plugins/jQuery/moment/moment.min.js}"></script>
	<script th:src="@{/js/ajaxfileupload/ajaxfileupload.js}"></script>
	<script th:src="@{/plugins/sha256.js}"></script>
	<script th:inline="javascript">
		window.rootPath= /*[[${#httpServletRequest.getContextPath()}]]*/
	</script>
</body>
</html>